<template>
  <!-- <scale-box :width="width" :height="height"  :delay="100"> -->
<a-config-provider :locale="locale">
  <div id="app" style="margin:0;">
        <router-view />
        <div v-if="showDr">
          <div class="viewsOrder" v-if="!drawer" @click="openDrawer">
          {{$t("content.remark")}}
        </div>
        </div>
        

        <el-drawer
          :title="$t('content.remark')"
          :visible.sync="drawer"
          :direction="direction"
          :destroy-on-close="false"
          size="200"
          class="drawerBox"
          :modal="false"
          :before-close="handleClose">
 
          <a-input-search :placeholder="$t('content.search')" v-model="searchWord" style="width: 84%;margin-bottom:10px;margin-left:30px;" @search="getRemarkList" />
          <!-- 单案件标记列表 -->
          <!-- <el-form style="width:480px;margin:0 auto;padding-left:20px;margin-top:10px;" ref="form" :model="form" :inline="true" label-width="0px">
            <el-form-item style="width:100%;"  label="">
              <el-input v-model="form.remark" @change="getRemarkList" placeholder="请输入备注关键词搜索"></el-input>
            </el-form-item>
            <el-form-item label="">
            <el-select v-model="form.proof_num" @change="getRemarkList" placeholder="请选择检材搜索">
              <el-option-group :label="i.label" v-for="(i,j) in proof_number" :key="j">
              <el-option :label="item.label" v-for="(item,index) in i.options" :key="index" :value="item.proof_num"></el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          </el-form>
          <div class="biaojiListBox">
            <div v-for="(item,index) in listData" :key="index" class="biaojiItem">
            <span title="详情" v-if="item.remark!==''" class="spanBoxContent">{{index+1}}.{{item.remark}} </span>
            <span title="详情" v-else class="spanBoxContent">{{index+1}}.标记了一条数据（暂无标记内容）。</span>
            <div>
              <span style="margin-right:10px;">{{item.remark_time}}</span>
            <el-button type="text" size="mini" @click="jumpOrder(item,index)">查看</el-button>
            <el-button type="text" size="mini" @click="deleteOrder(item,index)">删除</el-button>
            </div>
            </div>
          </div> -->

          <!-- 标记树状列表 -->
          <!-- <el-collapse class="listMark" style="height:850px;width:480px;padding:20px;overflow-y: auto;overflow-x: hidden;" accordion v-model="activeNames" @change="handleChange">
            <el-collapse-item v-for="(item,index) in listData.children" :key="index" :title="item.label_num" name="1">
              <div class="markItem" :title="index+1">
                <div style="height:100%;">
                  <span style="font-weight: bold;margin-right:10px;">{{ index+1 }}. </span>
                    与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
                </div>
                <div style="width:200px;height: 50px;text-align: center;">
                  <el-button type="text" style="margin-left:10px;">查看</el-button>
                  <el-button type="text">删除</el-button>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse> -->
          <!-- 多案件标记列表 -->
            <a-collapse v-if="listData" class="listMark" style="width:480px;margin:0 auto;padding-left:20px;margin-top:10px;" v-model="activeNames" @change="handleChange" accordion>
              <a-collapse-panel v-for="(firstItem,index) in listData" :key="index"  :header="firstItem.label_num">
                  <a-collapse accordion >
                      <a-collapse-panel v-for="(secondItem,i) in firstItem.children" :key="i"  :header="secondItem.label_num">
                          <a-collapse accordion >
                              <a-collapse-panel v-for="(threeItem,k) in secondItem.children" :key="k"  :header="threeItem.label+'-'+threeItem.proof_type">
                                <a-collapse accordion >
                                    <!-- <a-collapse v-for="(fourItem,j) in threeItem.children" :key="j"  :header="fourItem.label_num"> -->
                                      <div class="markItemBox" v-for="(fourItem,j) in threeItem.children" :key="j">
                                          <span>
                                           {{$t('content.remarkObject')}}：{{fourItem.label}}
                                            <br>
                                            {{$t('content.remarks')}}：{{ fourItem.remark }}
                                          </span>
                                          <div>
                                            <span class="chakan" @click="jumpOrder(fourItem,j)" style="cursor: pointer;margin-right:10px;">
                                              {{$t('content.views')}}
                                            </span>
                                            <span class="shanchu" @click="deleteOrder(fourItem,j)" style="cursor: pointer;">
                                              {{$t('content.delete')}}
                                            </span>
                                          </div>
                                        </div>
                                    <!-- </a-collapse> -->
                                </a-collapse>
                              </a-collapse-panel>
                          </a-collapse>
                      </a-collapse-panel>
                  </a-collapse>
                <!-- <a-collapse accordion >
                  <a-collapse-panel v-for="(secondItem,j) in firstItem.children" :key="j" :header="secondItem.label+' - '+secondItem.proof_type">
                    <a-collapse accordion :bordered="false" :expand-icon-position="expandIconPosition">
                        <div class="markItemBox" v-for="(threeItem,j) in secondItem.children" :key="j">
                        <span>
                          标记对象：{{threeItem.label}}
                          <br>
                          备注：{{ threeItem.remark }}
                        </span>
                        <div>
                          <span class="chakan" @click="jumpOrder(threeItem,j)" style="cursor: pointer;margin-right:10px;">
                            查看
                          </span>
                          <span class="shanchu" @click="deleteOrder(threeItem,j)" style="cursor: pointer;">
                            删除
                          </span>
                        </div>
                        </div>
                    </a-collapse>
                  </a-collapse-panel>
                </a-collapse> -->
              </a-collapse-panel>
            </a-collapse>
            <div v-else style="text-align: center;width:480px;
            margin-top: 20px;"> <i class="el-icon-warning-outline"></i>{{$t('content.notContent')}}!</div>
        </el-drawer>
  </div>
</a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
import { getRemarkListDataApi,delOrderApi } from '@/api/markApi/index'
// import ScaleBox from "vue2-scale-box";
import devPixelRatio from "@/utils/devicePixelRatio.js";
import ScreenShort from "js-web-screen-shot";

export default {
  name: 'App',
  // components: { ScaleBox },
  comments:{
  },
  data(){
    return{
      showDr:true,
      expandIconPosition:'right',
      selectedKeys:'',
      height:0,
      width:0,
      form:{
        proof_num:'',
        remark:''
      },
      activeNames:['1'],
      proof_number:[],
      locale:zhCN, //传值给a-config-provider组件
      drawer: false,
      direction: 'rtl',
      searchWord:'',
      offset:1,
      limit:20,
      listData:[],
      i18nVal:''
    }
  },
  beforeCreate(){
    this.width = window.screen.width * window.devicePixelRatio;
    this.height = window.screen.height * window.devicePixelRatio; 
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听器，以防止内存泄漏
    window.removeEventListener('keydown', this.handleKeyDown);
  },
  mounted() {
    // 添加键盘事件监听器
    window.addEventListener('keydown', this.handleKeyDown);
  },
  created(){
    // new devPixelRatio().init(); // 初始化页面比例
    this.init();
    var myString = "                               ___                       ,---,                         ,--,                                 \n" +
"                             ,--.'|_                   ,--.' |                       ,--.'|                                 \n" +
"  __  ,-.                    |  | :,'                  |  |  :         ,---,   ,---. |  | :     ,---.                       \n" +
",' ,'/ /,--,  ,--,           :  : ' :                  :  :  :     ,-+-. /  | '   ,',\\:  : '    '   ,',\\  ,----._,.           \n" +
"'  | |' |'. \\/ .`|         .;__,'  /    ,---.    ,---. :  |  |,--.,--.'|'   |/   /   |  ' |   /   /   |/   /  ' /     .--,  \n" +
"|  |   ,'  \\/  / ;         |  |   |    /     \\  /     \\|  :  '   |   |  ,\"' .   ; ,. '  | |  .   ; ,. |   :     |   /_ ./|  \n" +
"'  :  /  \\  \\.' /          :__,'| :   /    /  |/    / '|  |   /' |   | /  | '   | |: |  | :  '   | |: |   | .\\  ., ' , ' :  \n" +
"|  | '    \\  ;  ;            '  : |__.    ' / .    ' / '  :  | | |   | |  | '   | .; '  : |__'   | .; .   ; ';  /___/ \\: |  \n" +
";  : |   / \\  \\  \\           |  | '.''   ;   /'   ; :__|  |  :_:,|   | |--'  \\   \\  /;  :    ;\\   \\  / `---`-'| | \\  ;   :  \n" +
" ---'  |   :/\\  \\ ;          |  ,   /|   :    |   :    |  | ,'   |   |/       `----' |  ,   /  `----'  .'__/\\_: |  \\  \\  ;  \n" +
"       `---'  `--`            ---`-'  \\   \\  / \\   \\  /`--''     '---'                ---`-'           |   :    :   :  \\  \\ \n" +
"                                       `----'   `----'                                                  \\   \\  /     \\  ' ; \n" +
"                                                                                                         `--`-'       `--`  ";

console.log(myString);
// console.log('time:'+'2023-09-22');

  },
  watch: {
  '$route'(to, from) {
    // console.log('to',to);
    // 在每次路由变化时执行
    if (to.path === '/analyzeData') {
      // 执行你的操作
      this.showDr = false;
    }else{
      this.showDr = true;
    }
  }
},
  methods:{

    handleKeyDown(event) {
      // 检查是否同时按下了Alt键和R键
      if (event.altKey && event.key === 'r') {
        // 执行你想要的操作
        new ScreenShort({
        enableWebRtc: true, // 是否启用webrtc，值为false则使用html2canvas来截图
        loadCrossImg: true, // 跨域
        level: 999999999999999, // 层级
        // dpi: currentScale, // 设置 DPI
        // clickCutFullScreen:false,
        // wrcWindowMode:true
        
      });
      }
    },

    handleChange(){

    },
    deleteOrder(item,index){
      this.$confirm('此操作将永久删除该标记, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data={
        proof_num:item.proof_num,
        remark_id:item.remark_id
      }
      delOrderApi(data).then(res=>{
        this.getRemarkList();
        this.$message({
            type: 'success',
            message: '删除成功!'
          });
      })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
      });
    },
      getRemarkList(){
        this.listData = []
        sessionStorage.setItem('slectProofnum',this.form.proof_num);
        
        let data={
            // start_time:'',
            // end_time:'',
            // remark:this.form.remark,
            // model:'',
            // id:'',
            // // subtype:'',
            // proof_num:this.form.proof_num,
            // offset:this.offset,
            // limit:this.limit,
            // cnt:'',
            // remark_id:''
            searchKey:this.searchWord
        }
        getRemarkListDataApi(data).then(res=>{
            this.listData=res.data;
        }).catch(error=>{
          this.listData=[];
        })
      },
      jumpOrder(item,index){
        // return
        let data={
            class: item.class,
            cnt: item.cnt,
            label: item.label,
            model: item.model,
            proof_num: item.proof_num
        }
   
        // let data={
        //  class: "短信",
        //  cnt: 3,
        //  label: "SMS",
        //  model: "sms",
        //  proof_num: "111"
        // }
        // 储存类型
        sessionStorage.setItem('model',data.model)
        // 储存节点数据
        sessionStorage.setItem('sumData',JSON.stringify(item))
        // 激活跳转组件
        this.$store.commit('SET_ORDERDATA',Date.parse(new Date()))
        sessionStorage.setItem('only',true);

        this.$router.push({ name: "Dashboard"});
        this.drawer=false;
      },
      onSearchFirst(){
      },
      openDrawer(){
        this.drawer=true

        this.proof_number=JSON.parse(sessionStorage.getItem('proof_number'));

        this.form.proof_num=this.proof_number[0].proof_num
        this.getRemarkList();
      },
      handleClose(){
        this.drawer=false
      },
      init(){
     (function (doc, win) {
      setRem();
      var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          setRem();
        };
      if (!doc.addEventListener)
        return;
      win.addEventListener(resizeEvt, recalc, false);
      // doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    function setRem() {
      var docEl = document.documentElement;
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) {
        return;
      }
      if(100 * (clientWidth / 1080)>148){
          docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
      }else{
        docEl.style.fontSize=148
      }
    }},
  }
}
</script>

<style>
.fanyi{
  position: absolute;
  z-index: 99999999999999;
  left: 100px;
  top:18px;
}
.jietu{
  display: block;
}
.title{
  font-size:15px !important;
}

.el-drawer__body{
  overflow-y: auto;
}
body,HTML {
    margin: 0;
    padding: 0;
}
.drawerBox{
  z-index: 9999999999999 !important;
}
.chakan{
  color: #4092c5;
}
.chakan:hover{
  color: #164ae8;
}
.shanchu{
  color: #268bca;
}
.shanchu:hover{
  color: red;
}
.markItemBox{
  min-height: 30px;
  line-height: 30px !important;
  border-bottom:1px solid #e3e3e3;
  background: #fff;
  padding-left:10px;
  display: flex;
  cursor: pointer;
  justify-content: space-between;
  padding-right:10px;
}
.markItemBox:hover{
  background: #f1f1f1;
}
.contentTextData{
  width:300upx;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all; 
	display: -webkit-box; 
	-webkit-line-clamp: 2; /*多行在这里修改数字即可*/
	-webkit-box-orient: vertical;
}
.markItem{
  padding-left:20px;
  padding-right:20px;
  cursor: pointer;
  border: 1px solid #ededed;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}
.markItem:hover{
  background: #eeeeee;
  border-radius: 5px;
}

.listMark{
  height:800px;
  overflow-y: auto;
}
.listMark::-webkit-scrollbar {
  width: 8px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.listMark::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.listMark::-webkit-scrollbar-thumb {
  background-color: #c3c3c3;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.spanBoxContent{
  width: 280px;
  white-space: nowrap;/*内容超宽后禁止换行显示*/
  overflow: hidden;/*超出部分隐藏*/
  text-overflow:ellipsis;/*文字超出部分以省略号显示*/
}
.el-drawer__header{
  margin: 0;
}
.biaojiItem{
  height:40px;
  line-height: 40px;
  border-bottom: 1px solid rgb(237, 237, 237);
  display: flex;
  justify-content: space-between;
  transition: all .1s linear;
  cursor: pointer;
}
.biaojiItem:hover{
  transition: all .1s linear;
  font-weight: bold;
  color: rgb(37, 152, 253);
  /* transform: scale(1.1); */
}
.biaojiListBox{
  padding: 0px 30px;
} 
.viewsOrder{
  width: 40px;
  height: 105px;
  position: absolute;
  top: 150px;
  border: 1px solid rgb(224, 224, 224);
  right: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  /* background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
  cursor: pointer;
  /* padding:10px 10px ; */
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index:1000000000000000;
  background: #4abaf7;
  padding: 10px 10px;
  font-size: 14px;
  color:#fff;
  font-weight: bold;
  overflow: hidden;
}
button.btn-next,button.btn-prev{
  background: transparent !important;
}
.CompanyName{
  width: 200px;
  height: 50px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  margin: auto;
  z-index: 100000;
  color: #ccc;
}
#app{
  position: relative;
  z-index: inherit;
  /* min-width: 1000px;
  height: 100%; */
  /* max-width:1500PX; */
}
/* ant-modal */
.ant-modal-wrap {
    position: absolute;
    width: 100% !important;
    min-height: 400px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow: auto;
    outline: 0;
    -webkit-overflow-scrolling: touch;
}
/* ant-modal 遮罩层 */
.ant-modal-mask {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    filter: alpha(opacity=50);
}

.block{
  text-align: center;
}
</style>
<style scoped>

.container {
  display: flex;
  justify-content: center;
  margin-top: 10%;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  

  /* transform: rotate(90deg); */
  /* transform: rotate(90deg); */
}
.viewsOrder::before{
  content:"";
    position: absolute;
    left: -165px; /**第一个数字参数控制扫光速度，数字越大越慢**/
    top: -100px;
    width: 400px;
    height: 10px; /**光标的宽度，可根据实际调整**/
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    -o-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1.5s ease-in 1s infinite;
}
@-webkit-keyframes searchLights {
    0% { left: -120px; top: -100px; }
    to { left: 120px; top: 100px; }
}
@-o-keyframes searchLights {
    0% { left: -120px; top: -100px; }
    to { left:120px; top: 100px; }
}
@-moz-keyframes searchLights {
    0% { left: -120px; top: -100px; }
    to { left: 120px; top: 100px; }
}
@keyframes searchLights {
    0% { left: -120px; top: -100px; }
    to { left: 120px; top: 100px; }
}
    /**第一个数字参数控制扫光速度，数字越大越慢**
    

}

.arrow {
  position: absolute;
  width: 30px;
  height: 8px;
  opacity: 0;
  transform: scale(0.4);
  animation: move-arrow 3s ease-out infinite;
}
.arrow:first-child {
  animation: move-arrow 3s ease-out 1s infinite;
}
.arrow:nth-child(2) {
  animation: move-arrow 3s ease-out 2s infinite;
}
/* .arrow:before,
.arrow:after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background: #70a5da;
}
.arrow:before {
  left: 0;
  transform: skewY(-120deg);
}
.arrow:after {
  right: 20px;
  width: 50%;
  transform: skewY(120deg);
} */
@keyframes move-arrow {
  25% {
    opacity: 1;
  }

  33.3% {
    opacity: 1;
    transform: translateY(2.28rem);
  }

  66.6% {
    opacity: 1;
    transform: translateY(3.12rem);
  }

  100% {
    opacity: 0;
    transform: translateY(4.8rem) scale(0.5);
  }
}

</style>